Support React 18 #423

jesuyedavid · 2024-02-01T18:42:51Z

The following changes were made to support React 18:

Updated react and react-dom dev dependency versions from 17.0.2 to 18.2.0
Updated peer dependencies to allow React 18
Updated react-collapsed from v3.6.0 to v4.1.2 which supports React 18
Copied @reach/auto-id's useId hook with minor modifications from https://github.com/reach/reach-ui/blob/dev/packages/auto-id/src/reach-auto-id.ts. Because the peer dependencies of that library don't allow React 18, we weren't able to install it directly anymore. This useId hook uses React 18's useId hook if it's present and otherwise falls back to custom logic for React 16 and 17.
Added a new renderPin prop to MapboxMap to allows React 18 users to render custom JSX into the DOM node for the marker element. This gets around the issue of having to call createRoot from react-dom/client in MapboxMap. This was causing issues on React 16/17 sites because Vite and Webpack were unable to determine that the dynamic import of react-dom/client wouldn't be reachable, and tried to resolve the package unsuccessfully. Rather than force existing consumers of the repo to update their bundler config to exclude react-dom/client, we provide this optional prop to React 18 users if they want to use React 18 features in their custom pin component, or if they don't want to get the console warning about using ReactDOM.render if they use the PinComponent prop.

To support testing in React 18:

We are now fetching TextEncoder from utils when setting up the test environment because the new react-dom does not have it
@testing-library/react-hooks doesn't support React 18 and it's functionality has now been added to @testing-library/react in v14. Because of this, @testing-library/react was upgraded to v14.2.1, which only supports React 18, and @testing-library/react-hooks was removed from the dev dependencies. The GitHub workflow for testing React 16 and 17 was updated to manually downgrade @testing-library/react to v12 and install @testing-library/react-hooks. Custom logic is added so that if @testing-library/react-hooks is installed, it's renderHook method is used (i.e. React 16/17), and otherwise the renderHook method from @testing-library/react is used (React 18).

J=BACK-2911, BACK-2923
TEST=auto, manual

Updated the test-site to use the new React 18 app initialization and tested all updated components manually to ensure they're not broken. Did a local npm pack of the repo and successfully used it in Pages repos with React 17 and 18.

Some updates were also made to clean up our tests:

Upgraded @testing-library/user-event from v13.5.0 to v14.5.2, which makes async calls, so we no longer need waitFor. As part of this change, we started getting some new console errors when trying to navigate in tests by clicking links. This is because navigation is not defined in the jest jsdom environment. A util function was added to mock the console to remove these errors.
Updated the GitHub test workflow for React 16 and 17 to manually install optional swc libraries because the post install script doesn't seem to run properly after we install specific versions of react-related packages. More info at @swc/core threw an error when attempting to validate swc compiler options. swc-project/swc#5616 (comment)

benmcginnis · 2024-02-01T18:45:26Z

Seems like we need to fix all of the workflows

yext-search-ui-react-1.4.1.tgz

semgrep-app · 2024-02-08T00:38:18Z

Legal Risk
The following dependencies were released under a license that is currently prohibited by your organization. Merging is blocked until this is resolved.
Recommendation:
Reach out to your security team or Semgrep admin to address this issue. In special cases, exceptions may be made for dependencies with violating licenses, however, the general recommendation is to avoid using a dependency under such a license

non-standard
mapbox-gl 2.15.0
mapbox-gl 2.15.0

semgrep-app · 2024-02-08T00:56:33Z

Legal Risk
The following dependencies were released under a license that is currently prohibited by your organization. Merging is blocked until this is resolved.
Recommendation:
Reach out to your security team or Semgrep admin to address this issue. In special cases, exceptions may be made for dependencies with violating licenses, however, the general recommendation is to avoid using a dependency under such a license

non-standard
mapbox-gl 2.15.0
mapbox-gl 2.15.0

.github/workflows/run-tests.yml

semgrep-app · 2024-02-08T16:37:09Z

Legal Risk
The following dependencies were released under a license that is currently prohibited by your organization. Merging is blocked until this is resolved.
Recommendation:
Reach out to your security team or Semgrep admin to address this issue. In special cases, exceptions may be made for dependencies with violating licenses, however, the general recommendation is to avoid using a dependency under such a license

non-standard
mapbox-gl 2.15.0
mapbox-gl 2.15.0

semgrep-app · 2024-02-08T16:46:45Z

Legal Risk
The following dependencies were released under a license that is currently prohibited by your organization. Merging is blocked until this is resolved.
Recommendation:
Reach out to your security team or Semgrep admin to address this issue. In special cases, exceptions may be made for dependencies with violating licenses, however, the general recommendation is to avoid using a dependency under such a license

non-standard
mapbox-gl 2.15.0
mapbox-gl 2.15.0

package-lock.json

semgrep-app · 2024-02-08T17:14:34Z

Legal Risk
The following dependencies were released under a license that is currently prohibited by your organization. Merging is blocked until this is resolved.
Recommendation:
Reach out to your security team or Semgrep admin to address this issue. In special cases, exceptions may be made for dependencies with violating licenses, however, the general recommendation is to avoid using a dependency under such a license

non-standard
mapbox-gl 2.15.0
mapbox-gl 2.15.0

semgrep-app · 2024-02-08T17:21:21Z

Legal Risk
The following dependencies were released under a license that is currently prohibited by your organization. Merging is blocked until this is resolved.
Recommendation:
Reach out to your security team or Semgrep admin to address this issue. In special cases, exceptions may be made for dependencies with violating licenses, however, the general recommendation is to avoid using a dependency under such a license

non-standard
mapbox-gl 2.15.0
mapbox-gl 2.15.0

semgrep-app · 2024-02-08T17:31:17Z

Legal Risk
The following dependencies were released under a license that is currently prohibited by your organization. Merging is blocked until this is resolved.
Recommendation:
Reach out to your security team or Semgrep admin to address this issue. In special cases, exceptions may be made for dependencies with violating licenses, however, the general recommendation is to avoid using a dependency under such a license

non-standard
mapbox-gl 2.15.0
mapbox-gl 2.15.0

semgrep-app · 2024-02-08T17:55:23Z

Legal Risk
The following dependencies were released under a license that is currently prohibited by your organization. Merging is blocked until this is resolved.
Recommendation:
Reach out to your security team or Semgrep admin to address this issue. In special cases, exceptions may be made for dependencies with violating licenses, however, the general recommendation is to avoid using a dependency under such a license

non-standard
mapbox-gl 2.15.0
mapbox-gl 2.15.0

semgrep-app · 2024-02-08T17:57:31Z

Legal Risk
The following dependencies were released under a license that is currently prohibited by your organization. Merging is blocked until this is resolved.
Recommendation:
Reach out to your security team or Semgrep admin to address this issue. In special cases, exceptions may be made for dependencies with violating licenses, however, the general recommendation is to avoid using a dependency under such a license

non-standard
mapbox-gl 2.15.0
mapbox-gl 2.15.0

semgrep-app · 2024-02-08T17:59:37Z

Legal Risk
The following dependencies were released under a license that is currently prohibited by your organization. Merging is blocked until this is resolved.
Recommendation:
Reach out to your security team or Semgrep admin to address this issue. In special cases, exceptions may be made for dependencies with violating licenses, however, the general recommendation is to avoid using a dependency under such a license

non-standard
mapbox-gl 2.15.0
mapbox-gl 2.15.0

semgrep-app · 2024-02-08T18:02:04Z

Legal Risk
The following dependencies were released under a license that is currently prohibited by your organization. Merging is blocked until this is resolved.
Recommendation:
Reach out to your security team or Semgrep admin to address this issue. In special cases, exceptions may be made for dependencies with violating licenses, however, the general recommendation is to avoid using a dependency under such a license

non-standard
mapbox-gl 2.15.0
mapbox-gl 2.15.0

semgrep-app · 2024-02-08T18:04:13Z

Legal Risk
The following dependencies were released under a license that is currently prohibited by your organization. Merging is blocked until this is resolved.
Recommendation:
Reach out to your security team or Semgrep admin to address this issue. In special cases, exceptions may be made for dependencies with violating licenses, however, the general recommendation is to avoid using a dependency under such a license

non-standard
mapbox-gl 2.15.0
mapbox-gl 2.15.0

J=BACK-2923 TEST=auto

test-site/package-lock.json

… react18upgrade

yext-search-ui-react-1.5.0.tgz

package.json

nmanu1

the PR should point to develop rather than main

test-site/package-lock.json

nmanu1

looks like we use ReactDOM.render in the MapboxMap. we'll need to update that use the local react version's rendering approach

src/components/MapboxMap.tsx

tsconfig.json

### Features - Add `onDropdownInputChange` optional prop to `FilterSearch` component (#421) - Support React 18 (#423) ### Fixes - Resolve vulnerabilities (#422)

### Features - Added support for React 18 (#423) - Added an optional `onDropdownInputChange` prop to `FilterSearch` (#421) ### Fixes - Addressed vulnerabilities (#422)

jesuyedavid assigned nmanu1 Feb 1, 2024

jesuyedavid requested a review from a team as a code owner February 1, 2024 18:42

benmcginnis reviewed Feb 2, 2024

View reviewed changes

yext-search-ui-react-1.4.1.tgz Outdated Show resolved Hide resolved

jesuyedavid force-pushed the react18upgrade branch from 16e7e75 to f8468e8 Compare February 8, 2024 00:37

jesuyedavid force-pushed the react18upgrade branch from f8468e8 to 659ae41 Compare February 8, 2024 00:55

nmanu1 reviewed Feb 8, 2024

View reviewed changes

.github/workflows/run-tests.yml Outdated Show resolved Hide resolved

jesuyedavid force-pushed the react18upgrade branch from 659ae41 to c97edf6 Compare February 8, 2024 16:35

jesuyedavid force-pushed the react18upgrade branch from c97edf6 to 7054812 Compare February 8, 2024 16:45

nmanu1 reviewed Feb 8, 2024

View reviewed changes

package-lock.json Outdated Show resolved Hide resolved

jesuyedavid force-pushed the react18upgrade branch from 7054812 to 40e60b1 Compare February 8, 2024 17:13

jesuyedavid force-pushed the react18upgrade branch from 40e60b1 to 1d944ee Compare February 8, 2024 17:20

jesuyedavid force-pushed the react18upgrade branch from 1d944ee to 2360be9 Compare February 8, 2024 17:30

jesuyedavid force-pushed the react18upgrade branch from 2360be9 to a157a75 Compare February 8, 2024 17:54

upgrade to react18 file updates

d425b03

J=BACK-2923 TEST=auto

jesuyedavid force-pushed the react18upgrade branch from 5c087cc to d425b03 Compare February 8, 2024 19:44

semgrep-app bot reviewed Feb 8, 2024

View reviewed changes

test-site/package-lock.json Outdated Show resolved Hide resolved

semgrep-app bot reviewed Feb 8, 2024

View reviewed changes

test-site/package-lock.json Outdated Show resolved Hide resolved

jesuyedavid added 2 commits February 15, 2024 12:56

add react strict mode

b0cd849

Merge branch 'react18upgrade' of github.com:yext/search-ui-react into…

90ecea6

… react18upgrade